<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script>

    function isObject(value) {
      return typeof value === 'object' && value !== null
    }

    /** 
     * 创建响应式数据
     * @param [object ]:普通对象
     * @return [Proxy ]：代理对象
    */
    function reactive(data) {
      if (!isObject(data)) return
      return new Proxy(data, {
        get(target, key) {
          console.log(target, key);
          return target[key]
        },
        set(target, key, value) {
          target[key] = value
          effect()
          return true
        }
      })
    }

    // 定义一个响应式数据：触发者
    const state = reactive({ name: 'xiaopang' })

    // 定义一个副作用函数：响应者
    function effect() {
      app.innerHTML = state.name
    }

    effect()
    // 当数据改变的时候，重新执行对应副作用函数effect
    setTimeout(() => {
      state.name = "顿健康"
    }, 1000)

  </script>
</body>

</html>